@import (reference) "@{cosyless}";
.mod-calendar{
    width:330px;
    background: #fff;
    float: right;
    height: 100%;
    .calendar-hd{
        padding: 10px 10px 10px 20px;
        height:40px;
        line-height:28px;
        background: url(../images/ct-bg.jpg) no-repeat right top;
        h2{
            font-weight: normal;
            font-size: 16px;
            color: #666;
        }
        .calendar-track{
            float: right;
            height:28px;
            a{
                display: block;
                color: #fff;
                .fui-font{
                    display: inline-block;
                    vertical-align: middle;
                    margin-top: -6px;
                }
            }
        }
    }
    .calendar-nowTime{
        height:100px;
        padding: 0 20px;
        position: relative;
        .cn-month{
            position: absolute;
            top:5px;
            left:20px;
            line-height:20px;
            color: #908f8f;
            font-size: 13px;
        }
        .cn-week{
            position: absolute;
            bottom:20px;
            right:20px;
            color: #908f8f;
            font-size: 13px;
            line-height:20px;
        }
        .cn-day{
            position: relative;
            span{
                position: absolute;
                color: #a2b0c0;
                &.cnd-dw{
                    left:185px;
                    line-height:18px;
                    top:55px;
                    font-size: 13px;
                }
                &.cnd-num{
                    font-size: 50px;
                    top:0;
                    width:75px;
                    text-align: right;
                    line-height:100px;
                    left:100px;
                }
            }
        }
    }
    .calendar-log{
        padding: 0 20px 40px;
        position: relative;
        .cLog-text{
            background: #f4f4f4;
            height:270px;
            textarea{
                box-sizing: border-box;
                padding: 8px;
                line-height:24px;
                color: #666;
                font-size: 13px;
                width:100%;
                height:100%;
                border: none;
                outline: none;
                background: none;
            }
        }
        .cLog-btn{
            position: absolute;
            bottom:0;
            height:40px;
            left:0;
            width:100%;
            .btn{
                background: #06d79c;
                width:50px;
                position: absolute;
                top:-25px;
                left:50%;
                margin-left: -25px;
                border-radius: 50%;
                text-align: center;
                line-height:50px;
                color: #fff;
                transition: all .5s;
                text-indent: 2px;
                .fui-font{
                    font-size: 2.5rem;
                }
                &:hover{
                    box-shadow: 0 0 0 8px rgba(6,215,156,.15);
                }
            }
        }
    }
}

//日历样式表
@c1:#525252;
@c2:#939393;
@c3:#939393;
@wH:34px;
@b1:#7b87eb;
@b2:#fff;
.mod-calendar{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    .calendar-head{
        line-height:20px;
        min-height: 20px;
        padding-top: 10px;
        text-align: center;
        color: @c1;
        font-size: 14px;
        background: @b2;
        display: none;
    }
    .calendar-week{
        height:@wH;
        background: @b2;
        ul{
            .clearfix();
            overflow: hidden;
            height:inherit;
        }
        li{
            float: left;
            width:14%;
            text-align: center;
            color: @c1;
            height:inherit;
            line-height:@wH;
            font-size: 14px;
            &:first-child,&:last-child{
                width:15%;
                color: @c2;
            }
        }
    }
    .calendar-date{
        position: relative;
        cursor: pointer;
        background: @b2;
        ul{
            .clearfix();
        }
        li{
            float: left;
            cursor: pointer;
            width:14%;
            height:35px;
            text-align: center;
            position: relative;
            opacity:0.5;
            a{
                display: block;
                color: @c1;
                width:25px;
                height:25px;
                line-height:25px;
                text-align: center;
                margin: 5px auto 0;
                font-size: 14px;
                border-radius: 50%;
            }
            &.calendar-Weekends{
                width:15%;
                a{
                    color: @c2;
                }
            }
            &.calendar-lack{
                &:after{
                    content: '';
                    width:6px;
                    height:6px;
                    border-radius: 50%;
                    background: #ff8585;
                    position: absolute;
                    left:50%;
                    margin-left: -3px;
                    bottom:-3px;
                }
            }
            &.calendar-curMonth{
                opacity:1;
            }
            &.calendar-checked{
                a{
                    background: #f0f1ff;
                }
            }
            &.calendar-today{
                a{
                    background: @b1;
                    color: #fff;
                }
            }
        }
    }
    .calendar-info{
        line-height:30px;
        padding-left: 12px;
        font-size: 12px;
        color: @c1;
    }
}


